<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="add-setwork">
      <el-button
        type="warning"
        @click="addWork(false)"
      >添加工作模式</el-button>
    </div>
    <div class="tabel">
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
          width="250"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="工作时间"
          width="250"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="addWork(scope.row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: red"
              @click="delWork(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        style="text-align: center;"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 添加工作模式弹框 -->
    <workArrangeAdd
      ref="addDialog"
      @getList="getList"
    ></workArrangeAdd>
  </div>
</template>

<script>
import { workHistoryList, deleteWorkHistory } from '@/api/transit'
import workArrangeAdd from './components/workArrange-add.vue'
export default {
  components: {
    workArrangeAdd
  },
  data() {
    return {
      list: [], // 列表数据
      params: {
        page: 1, // 页码
        pageSize: 10
      },
      pages: '',
      counts: '' // 总数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      const res = await workHistoryList(this.params)
      this.list = res.data.items
      this.pages = res.data.pages
      this.counts = res.data.counts
    },
    // 分页器
    handleCurrentChange(num) {
      this.params.page = num
      this.getList()
    },
    // 添加 & 编辑
    addWork(id) {
      if (id) {
        this.$refs.addDialog.id = id
      }
      this.$refs.addDialog.dialogVisible = true
    },
    // 删除
    async delWork(id) {
      await deleteWorkHistory(id)
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  margin: 0 40px;
  margin-top: 20px;
  padding: 50px;
  background-color: #fff;
  height: 1000px;

  .el-button {
    width: 130px;
  }

  .tabel {
    margin-top: 50px;
    margin-bottom: 30px;
    .el-button {
      width: 35px;
    }
  }
}
</style>
